<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts Data View</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/global.js"></script>
    <script src="../js/echarts.js"></script>
    <style>
        .box {
            overflow: hidden;
            /*border: 1px solid red;*/
            padding: 5px 0;
        }

        .view {
            margin: 10px;
            display: block;
            float: left;
            box-shadow: 1px 19px 28px 0 rgba(0, 0, 0, .18);
        }

        #view1 {
            width: 800px;
            height: 800px;
        }

        #view2, #view3 {
            width: 1000px;
            height: 390px;
        }
    </style>
</head>
<body>
<div class="layui-container box">
    <div id="view1" class="view"></div>
    <div id="view2" class="view"></div>
    <div id="view3" class="view"></div>
</div>

<script>
    $(async () => {
        await created()
        let animationSetting = {
            animationDuration: 2800,
            animationEasing: "cubicInOut",
        }

        // 加载第一个视图(左)
        async function loadView1() {
            // api获取实时专业名和对应人数的数据
            let {data: {data}} = await axios(api.echarts.majorData)
            let view1 = echarts.init(document.getElementById('view1'))
            let option1 = {
                ...animationSetting,
                title: {
                    text: '各专业学生数量所占比例',
                    subtext: '实时数据',
                    x: 'center'
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: data.map(m => m.majorName)
                },
                tooltip: {
                    trigger: 'item',
                    // axisPointer: {
                    //     type: 'cross',
                    //     crossStyle: {
                    //         color: '#999'
                    //     }
                    // },
                    formatter: ({name, value,percent}) => name + '<br>' + value + '人&nbsp;&nbsp;/&nbsp;&nbsp;'+ percent+'%'
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: data.map(m => ({name: m.majorName, value: m.count}))
                    }
                ]
            };
            view1.setOption(option1)
        }

        // 加载第二个视图(右上)
        async function loadView2() {
            let view2 = echarts.init(document.getElementById('view2'))
            let {data: {data: {years, series}}} = await axios(api.echarts.majorRecruitmentData)
            let option = {
                ...animationSetting,
                title: {
                    text: '近些年各专业招生数量情况',
                    subtext: '实时数据',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    data: series.map(m => m.name)
                },
                // grid: {
                //     left: '3%',
                //     right: '4%',
                //     bottom: '3%',
                //     containLabel: true
                // },
                // toolbox: {
                //     feature: {
                //         saveAsImage: {}
                //     }
                // },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: years
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            };
            view2.setOption(option)
        }

        // 加载第三个视图(右下)
        async function loadView3() {
            let view3 = echarts.init(document.getElementById('view3'))
            let {data: {data: {courseNames, averages, maxs, mins}}} = await axios(api.echarts.courseAverages)
            let option = {
                ...animationSetting,
                title: {
                    text: '各个课程最高分, 平均分, 最低分',
                    subtext: '实时数据',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                xAxis: {
                    data: courseNames,
                    type: 'category',
                    axisLabel: {interval: 0, rotate: 35}
                },
                yAxis: {
                    type: 'value'
                },
                legend: {
                    data: ['平均分', '最高分', '最低分'],
                    orient: 'vertical',
                    x: 'right'
                },
                series: [
                    {
                        name: '最高分',
                        data: maxs,
                        type: 'bar'
                    },
                    {
                        name: '平均分',
                        data: averages,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(220, 220, 220, 0.8)'
                        }
                    },
                    {
                        name: '最低分',
                        data: mins,
                        type: 'bar',
                    }
                ]
            };

            view3.setOption(option)
        }

        // 加载事件
        async function created() {
            loadView1()
            loadView2()
            loadView3()
        }
    })
</script>
</body>
</html>